<template>
  <div>
    <a-button class="action-btn" @click="onAddAction"> {{ title }} </a-button>
    <BwJSExtend
      v-model:visible="curVisible"
      :value="curJSExpression"
      @ok="onOk"
    />
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, ref } from 'vue'

import BwJSExtend from '@/views/design/components/coms/JSExtend/index.vue'
import { BwJsExtndInfoModel } from '/@/views/design/components/coms/JSExtend/model'
import {
  BwCustomComNodeAttrFromTypeEnum,
  BwCustomComNodeAttrModel,
} from '@bitwit/base-com-render'

export default defineComponent({
  name: 'BwNodeAttrsConstConfigFunction',
  components: {
    BwJSExtend,
  },
  props: {
    value: {
      type: [Object] as PropType<BwCustomComNodeAttrModel>,
      default: () => ({
        valueFromType: BwCustomComNodeAttrFromTypeEnum.JSExpression,
        valueDataType: null,
      }),
    },
    title: {
      type: String,
      default: '绑定动作',
    },
  },
  emits: ['update:value'],
  setup(props, { emit }) {
    /** 对象值 */
    const curValue = computed({
      get: (): BwCustomComNodeAttrModel => props.value,
      set: (val) => emit('update:value', val),
    })

    const curVisible = ref(false)

    const curJSExpression = ref<BwJsExtndInfoModel>({})

    const onAddAction = () => {
      curVisible.value = true
      curJSExpression.value = {
        logic: curValue.value?.jsExpBodyLogic ?? undefined,
        params: curValue.value?.jsExpParams ?? undefined,
      }
    }

    const onOk = (data: BwJsExtndInfoModel) => {
      curVisible.value = false
      curValue.value = {
        valueFromType: BwCustomComNodeAttrFromTypeEnum.JSExpression,
        valueDataType: null,
        jsExpBodyLogic: data.logic,
        jsExpParams: data.params,
      }
    }

    return {
      curVisible,
      curValue,
      curJSExpression,
      onOk,
      onAddAction,
    }
  },
})
</script>

<style lang="less" scoped>
.action-btn {
  width: 100%;
}
</style>
